<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="900px"
    :before-close="handleClose"
    custom-class="operation-log-dialog"
  >
    <div class="log-container">
      <div class="timeline-container">
        <el-timeline>
          <el-timeline-item
            v-for="(log, index) in logData"
            :key="index"
            :timestamp="log.createTime"
            :type="getTimelineType(log.operate)"
            placement="top"
          >
            <el-card class="log-card" :class="getOperateClass(log.operate)">
              <div class="log-header">
                <div class="log-basic-info">
                  <span class="operate-type">
                    <el-tag :type="getOperateType(log.operate)" size="small">
                      {{ getOperateText(log.operate) }}
                    </el-tag>
                  </span>
                  <span class="operator">操作人：{{ log.opeUser }}</span>
                  <span class="department">部门：{{ log.opeDept || '-' }}</span>
                  <span class="result">
                    <el-tag :type="log.opeResult === '成功' ? 'success' : 'danger'" size="small">
                      {{ log.opeResult }}
                    </el-tag>
                  </span>
                </div>
              </div>

              <div class="log-detail">
                <div class="detail-section">
                  <h4 class="section-title">详细信息</h4>
                  <div class="detail-grid">
                    {{log.opeDetail}}
<!--                    <template v-for="(value, key) in parsedDetail(log.opeDetail)">-->
<!--                      <div v-if="shouldDisplayField(key, value)" :key="key" class="detail-item">-->
<!--                        <span class="field-label">{{ getFieldTitle(key) }}：</span>-->
<!--                        <span class="field-value" :class="getValueClass(key)">-->
<!--                          {{ formatFieldValue(key, value) }}-->
<!--                        </span>-->
<!--                      </div>-->
<!--                    </template>-->
                  </div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'OperationLogDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    logData: {
      type: Array,
      default: () => []
    },
    idCardNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      fieldTitles: {
        // 基本信息
        cbrxm: '承办人姓名',
        cbrxmMz: '承办人姓名',
        szxm: '死者姓名',
        szxmMz: '死者姓名',
        xb: '性别',
        xbMz: '性别',
        nl: '年龄',
        nlMz: '年龄',
        zjlx: '证件类型',
        zjlxMz: '证件类型',
        zjhm: '证件号码',
        zjhmMz: '证件号码',

        // 联系信息
        lxdh: '联系电话',
        lxdhMz: '联系电话',
        hkszd: '户口所在地',
        hkszdMz: '户口所在地',
        szdz: '死者住址',
        szdzMz: '死者住址',

        // 业务信息
        gx: '关系',
        gxMz: '关系',
        slry: '受理人员',
        slryMz: '受理人员',
        szbh: '死者编号',
        szbhMz: '死者编号',

        // 时间信息
        swrq: '死亡日期',
        swrqMz: '死亡日期',
        hhsj: '火化时间',
        hhsjMz: '火化时间',
        rgsj: '入馆时间',
        rgsjMz: '入馆时间',

        // 其他
        swyy: '死亡原因',
        swyyMz: '死亡原因',
        updateBy: '更新人',
        updateTime: '更新时间',
        id: '记录ID'
      }
    }
  },
  computed: {
    dialogTitle() {
      return `操作日志 - 身份证号：${this.idCardNumber}`
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(val) {
        this.dialogVisible = val
      }
    },
    dialogVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$emit('close')
    },

    parsedDetail(opeDetail) {
      if (!opeDetail) return {}
      try {
        return JSON.parse(opeDetail)
      } catch (error) {
        console.error('解析操作详情失败:', error)
        return {}
      }
    },

    getOperateType(operate) {
      const typeMap = {
        'INSERT': 'success',
        'UPDATE': 'warning',
        'DELETE': 'danger',
        'EXPORT': 'primary',
        'IMPORT_INSERT': 'info'
      }
      return typeMap[operate] || 'info'
    },

    getOperateText(operate) {
      const textMap = {
        'INSERT': '新增',
        'UPDATE': '更新',
        'DELETE': '删除',
        'EXPORT': '导出',
        'IMPORT_INSERT': '导入'
      }
      return textMap[operate] || operate
    },

    getTimelineType(operate) {
      const typeMap = {
        'INSERT': 'success',
        'UPDATE': 'warning',
        'DELETE': 'danger',
        'EXPORT': 'primary',
        'IMPORT_INSERT': 'info'
      }
      return typeMap[operate] || 'primary'
    },

    getOperateClass(operate) {
      return `operate-${operate.toLowerCase()}`
    },

    getFieldTitle(key) {
      return this.fieldTitles[key] || key
    },

    shouldDisplayField(key, value) {
      // 过滤掉不需要显示的字段
      const excludeFields = ['params']
      return !excludeFields.includes(key) && value !== null && value !== undefined
    },

    formatFieldValue(key, value) {
      // 性别字段格式化
      if ((key === 'xb' || key === 'xbMz')) {
        const genderMap = {
          '男': '男',
          '女': '女',
          '1': '男',
          '0': '女',
          'male': '男',
          'female': '女'
        }
        return genderMap[value] || value
      }

      // 时间字段格式化
      if ((key.includes('Time') || key.includes('sj') || key.includes('rq')) && value) {
        return this.formatDateTime(value)
      }

      return value === '' ? '空' : value
    },

    getValueClass(key) {
      // 根据字段类型添加特殊样式
      if (key.includes('Time') || key.includes('sj') || key.includes('rq')) {
        return 'time-value'
      }
      if (key === 'xb' || key === 'xbMz') {
        return 'gender-value'
      }
      return ''
    },

    formatDateTime(dateTime) {
      if (!dateTime) return '-'
      // 简单的时间格式化
      return dateTime.replace('T', ' ').replace(/\.\d+/, '')
    }
  }
}
</script>

<style lang="scss" scoped>
.log-container {
  max-height: 70vh;
  overflow-y: auto;

  .timeline-container {
    padding: 10px 0;

    ::v-deep .el-timeline {
      .el-timeline-item {
        .el-timeline-item__timestamp {
          color: #606266;
          font-size: 13px;
        }
      }
    }
  }

  .log-card {
    margin: 8px 0;
    border-left: 4px solid #e4e7ed;

    &.operate-insert {
      border-left-color: #67c23a;
    }

    &.operate-update {
      border-left-color: #e6a23c;
    }

    &.operate-delete {
      border-left-color: #f56c6c;
    }

    .log-header {
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;

      .log-basic-info {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;

        .operator, .department {
          color: #606266;
          font-size: 13px;
        }
      }
    }

    .log-detail {
      .section-title {
        margin: 0 0 12px 0;
        color: #303133;
        font-size: 14px;
        font-weight: 600;
      }

      .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 12px;

        .detail-item {
          display: flex;
          align-items: flex-start;
          padding: 8px 12px;
          background: #f8f9fa;
          border-radius: 4px;
          transition: all 0.3s;

          &:hover {
            background: #f0f2f5;
          }

          .field-label {
            color: #606266;
            font-weight: 500;
            min-width: 100px;
            flex-shrink: 0;
          }

          .field-value {
            color: #303133;
            word-break: break-all;

            &.time-value {
              color: #409eff;
              font-weight: 500;
            }

            &.gender-value {
              color: #e6a23c;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}

::v-deep .operation-log-dialog {
  .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #e8e8e8;

    .el-dialog__title {
      color: #303133;
      font-weight: 600;
      font-size: 16px;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    padding: 10px 20px 20px;
    border-top: 1px solid #e8e8e8;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .log-detail .detail-grid {
    grid-template-columns: 1fr !important;
  }

  .log-header .log-basic-info {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}
</style>
